<template>
  <div class="listdetail" :style="{'min-height':listdetail + 'px'}">
    <div class="listdetail_top">
      <ul>
        <li v-for="item,idx in listobj" @click="listHandle(item.id)" :class="{list_act:item.id == listidx}">
          {{item.name}}
          <p v-show="item.id == listidx"></p>
        </li>
      </ul>
    </div>
    <div class="listdetail_content">
      <ul>
        <li v-for="item,idx in mobanobj">
          <tmp :list='item'></tmp>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import tmp from './productlist.vue'
import $ from 'jquery'
import axios from 'axios'
export default {
  data () {
    return {
      listdetail: '',
      listparent: '',
      listobj: '',
      listidx: 0,
      mobanobj: ''
    }
  },
  methods: {
    listHandle (idx) {
      console.log(idx)
      this.listidx = idx
      var urls = 'goodsList' + '/cid/' + idx + '/page/' + 1 + '/pagesize/' + 100
      axios.post('/api/' + urls).then(e => {
        console.log(e.data)
        this.mobanobj = e.data
      })
    }
  },
  created () {
    this.listdetail = $(window).height()
    console.log(this.$route.query)
    this.$cookies.set('listobjs', this.$route.query)
    this.listparent = this.$cookies.get('listobjs')
    axios.post('/api/' + 'goodsCategory').then(e => {
      var obj = e.data.filter(e => e.parent == this.listparent.id)
      this.listobj = obj
      this.listHandle(this.listparent.childrenid)
      console.log(obj)
    })
  },
  components: {
    tmp
  }
}
</script>

<style>
.listdetail{
  background-color: #ffffff;
}
.listdetail_top{
  width: 7.5rem;
  height: 0.9rem;
  background-color: #ffffff;
  box-shadow: 0 1px 5px #dcdcdc;
  position: relative;
  overflow: hidden;
  z-index: 5;
}
.listdetail_top ul{
  height: 1rem;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.listdetail_top ul li{
  width: auto;
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.24rem;
  color: #666666;
  padding: 0 0.3rem 0 0.3rem;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.listdetail_top ul li p {
  width: 0.5rem;
  height: 0.04rem;
  background-color: #f56d02;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -0.25rem;
}
.list_act{
  color: #f56d02 !important;
}
.listdetail_content{
  width:7.5rem;
}
.listdetail_content ul{
  width: 7.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.listdetail_content ul li{
  margin-bottom: 0.2rem;
  margin-left: 0.45rem;
}
.listdetail_content ul li:nth-child(2n){
}
</style>
